<template>
  <div>
    <el-main :style="{ '--zoom': zoom }">
      <el-row
        v-if="company_name"
        :gutter="10"
        style="margin-left: 0px; margin-right: 0px"
      >
        <el-col :span="6">
          <el-card shadow="never" class="Navigation">
            <el-row class="date_box">
              <el-col class="datetitle"> 走访时间 </el-col>
              <el-col
                @click.native="choice(item)"
                :class="
                  item == Visitdatechoice
                    ? 'data_border_b active_data_l'
                    : 'data_border_b'
                "
                v-for="(item, index) in Visitdate"
                :key="index"
                :ref="item + 'card'"
              >
                {{ item }}
              </el-col>
              <el-col class="date_button_t">
                <el-button
                  class="button_from_i"
                  type="primary"
                  round
                  @click="addEnterprisevisit"
                  >创建待走访记录 +</el-button
                >
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="18" :offset="6">
          <el-row class="company_text">
            <el-col>
              <el-card shadow="never">
                <el-row>
                  <el-col>
                    <el-row>
                      <el-col :span="12" class="company_title">
                        {{ company_name }}
                        <el-button
                          size="mini"
                          type="primary"
                          round
                          @click="table = true"
                          >企业信息</el-button
                        >
                        <!-- <el-row type="flex">
                          <el-col>{{ company_name }}</el-col>
                          <el-col><el-button size="mini" type="primary" round>企业信息</el-button></el-col>
                        </el-row> -->
                      </el-col>
                      <el-col :span="2" :offset="10">
                        <!-- <el-button size="mini" type="primary" round>导出</el-button> -->
                      </el-col>
                    </el-row>
                  </el-col>

                  <el-descriptions
                    title=""
                    :column="4"
                    :labelStyle="labelStyle"
                    :contentStyle="contentStyle"
                  >
                    <el-descriptions-item label="邮箱">{{
                      datalist[0] ? datalist[0].visit.email : ""
                    }}</el-descriptions-item>
                    
                    <el-descriptions-item label="联系人">{{
                      datalist[0] ? datalist[0].visit.people : ""
                    }}</el-descriptions-item>
                    <el-descriptions-item label="联系方式">{{
                      datalist[0] ? datalist[0].visit.phone : ""
                    }}</el-descriptions-item>
                    <!-- <el-descriptions-item label="所属区域">{{
                      street_name ? street_name : ""
                    }}</el-descriptions-item> -->
                    <el-descriptions-item label="企业标签" :span="4">
                      <div v-if="datalist[0]">
                        <el-tag
                          size="small"
                          v-for="item in datalist[0].label_true_name"
                          :key="item.id"
                          class="b_bule"
                          >{{ item.name }}</el-tag
                        >
                        <el-tag
                          size="small"
                          v-for="item in datalist[0].label_name"
                          :key="item.id"
                          class="b_bule"
                          >{{ item.name }}</el-tag
                        >
                      </div>
                    </el-descriptions-item>
                    <el-descriptions-item label="已解决" :span="4">
                      <div v-if="datalist[0]">
                        <el-tag
                          class="b_bule b_red2"
                          v-for="(item, index) in solveSuccess"
                          :key="item.id"
                          >{{ item.name }}</el-tag
                        >
                      </div>
                    </el-descriptions-item>
                    <el-descriptions-item label="未解决" :span="4">
                      <div v-if="datalist[0]">
                        <el-tag
                          class="b_bule b_red"
                          v-for="(item, index) in solveNot"
                          :key="item.id"
                          >{{ item.name }}</el-tag
                        >
                      </div>
                    </el-descriptions-item>
                  </el-descriptions>
                  <!-- 
                  <el-col class="success_box">
                    <el-row>
                      <el-col :span="2" style="font-size: 14px;">已解决</el-col>
                      <el-col :span="22">
                        <el-tag class="b_bule b_red2" v-for="(item, index) in solveSuccess" :key="item.id">{{
                            item.name
                        }}</el-tag>
                      </el-col>
                    </el-row>
                  </el-col>

                  <el-col class="not_box">
                    <el-row>
                      <el-col :span="2" style="font-size: 14px;">未解决</el-col>
                      <el-col :span="22">
                        <el-tag class="b_bule b_red" v-for="(item, index) in solveNot" :key="item.id">{{
                            item.name
                        }}</el-tag>
                      </el-col>
                    </el-row>
                  </el-col> -->
                </el-row>
              </el-card>
            </el-col>
          </el-row>

          <el-row>
            <el-col
              v-for="(item, index) in Visitdate"
              :key="item + index"
              :ref="item"
            >
              <el-row class="date_category">
                <el-col :span="12">
                  <div class="updateInfo">
                    {{ item }}
                    <el-button
                      round
                      type="primary"
                      style="padding: 7px 40px"
                      @click="modifyInfo(index)"
                      >更改
                    </el-button>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div style="float: right">
                    <el-button
                      @click.stop="DeleteBtn(datalist[index])"
                      slot="reference"
                      type="danger"
                      round
                      size="mini"
                      >删除</el-button
                    >
                  </div>
                </el-col>
              </el-row>
              <el-row class="form_vt">
                <el-col class="form_top">
                  <el-card shadow="never">
                    <el-row>
                      <el-col class="f_t_box">
                        <el-form
                          v-if="datalist[index]"
                          ref="form"
                          :model="datalist[index]"
                          label-width="120px"
                        >
                          <el-row :gutter="20">
                            <el-col :span="12">
                              <!-- <el-form-item label="企业名称">
                                <el-input :disabled="true" v-model="datalist[index].company_name"></el-input>
                              </el-form-item>
                              <el-form-item label="联系人">
                                <el-input :disabled="true" v-model="datalist[index].visit.people"></el-input>
                              </el-form-item> -->
                              <el-form-item label="走访人员">
                                <!-- <el-select :disabled="true" v-model="datalist[index].visit.work_id" multiple
                                  placeholder="">
                                  <el-option v-for="item in Visitpeoplelist1" :key="item.id" :label="item.name"
                                    :value="item.id">
                                  </el-option>
                                </el-select> -->
                                <el-input
                                  disabled
                                  v-model="datalist[index].work_name"
                                ></el-input>
                              </el-form-item>
                            </el-col>
                            <el-col :span="12">
                              <!-- <el-form-item label="邮箱">
                                <el-input :disabled="true" v-model="datalist[index].visit.email"></el-input>
                              </el-form-item>
                              <el-form-item label="联系方式">
                                <el-input :disabled="true" v-model="datalist[index].visit.phone"></el-input>
                              </el-form-item> -->
                              <el-form-item class="Visitdate" label="走访时间">
                                <el-col>
                                  <el-date-picker
                                    :disabled="true"
                                    type="datetime"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    placeholder=""
                                    v-model="datalist[index].visit.v_time"
                                    style="width: 100%"
                                  >
                                  </el-date-picker>
                                </el-col>
                              </el-form-item>
                            </el-col>
                          </el-row>
                          <el-form-item label="走访照片">
                            <!-- <el-image v-for="item in datalist[index].visit.images" style="width: 100px; height: 100px"
                              :src="item" fit="cover"></el-image> -->
                            <el-upload
                              :on-preview="handlePictureCardPreview"
                              v-if="Array.isArray(datalist[index].visit.images)"
                              action="#"
                              ref="upload1"
                              list-type="picture-card"
                              :file-list="datalist[index].visit.images"
                            >
                              <i slot="default" class="el-icon-plus"></i>
                              <div slot="file" slot-scope="{ file }">
                                <img
                                  style="position: absolute"
                                  class="el-upload-list__item-thumbnail"
                                  :src="file.url"
                                  alt=""
                                />
                                <span class="el-upload-list__item-actions">
                                  <span
                                    class="el-upload-list__item-preview"
                                    @click="handlePictureCardPreview(file)"
                                  >
                                    <i class="el-icon-zoom-in"></i>
                                  </span>
                                </span>
                              </div>
                            </el-upload>
                            <el-dialog :visible.sync="d_img">
                              <img width="100%" :src="dialogImageUrl" alt="" />
                            </el-dialog>
                          </el-form-item>
                          <el-form-item label="知识产权诊断">
                            <el-input
                              :disabled="true"
                              :autosize="{ minRows: 3, maxRows: 10 }"
                              type="textarea"
                              v-model="datalist[index].visit.des"
                            >
                            </el-input>
                          </el-form-item>

                          <el-row
                            v-for="(item_, index_) in datalist[index].demand"
                          >
                            <el-col>
                              <el-form-item :label="'企业需求' + (index_ + 1)">
                                <el-input
                                  :disabled="true"
                                  :autosize="{ minRows: 3, maxRows: 10 }"
                                  type="textarea"
                                  v-model="item_.des"
                                >
                                </el-input>
                              </el-form-item>
                            </el-col>
                            <el-col class="bo_primary">
                              <el-button
                                v-if="item_.status == '0'"
                                class="bo_primary_i"
                                type="primary"
                                round
                                @click="addprogramme"
                              >
                                未解决
                              </el-button>
                              <el-button
                                v-else
                                class="bo_primary_i2"
                                type="primary"
                                round
                                @click="addprogramme"
                              >
                                已解决
                              </el-button>
                            </el-col>
                            <el-col>
                              <el-form-item label="需求标签">
                                <div>
                                  <el-tag
                                    v-for="item_1 in item_.label_arr"
                                    :key="item.id"
                                    class="b_bule b_red"
                                    >{{ item_1.name }}</el-tag
                                  >
                                </div>
                              </el-form-item>
                            </el-col>
                            <el-col :span="12" class="qw_date">
                              <el-form-item class="" label="期望解决时间">
                                <el-date-picker
                                  :disabled="true"
                                  type="datetime"
                                  value-format="yyyy-MM-dd HH:mm:ss"
                                  placeholder=""
                                  v-model="item_.solve_time"
                                >
                                </el-date-picker>
                              </el-form-item>
                            </el-col>

                            <el-col>
                              <el-row :gutter="20">
                                <el-col :span="12">
                                  <el-form-item label="解决人">
                                    <!-- <el-select :disabled="true" v-model="item_.so_id" multiple placeholder="">
                                      <el-option v-for="item_2 in Visitpeoplelist2" :key="item_2.id"
                                        :label="item_2.name" :value="item_2.id">
                                      </el-option>
                                    </el-select> -->
                                    <el-input
                                      disabled
                                      :placeholder="item_.vo_id_name"
                                    ></el-input>
                                  </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                  <el-form-item label="解决时间">
                                    <el-input
                                      :disabled="true"
                                      v-model="item_.so_time"
                                    ></el-input>
                                  </el-form-item>
                                </el-col>
                              </el-row>
                            </el-col>

                            <el-col>
                              <el-form-item label="解决方案">
                                <el-input
                                  :disabled="true"
                                  type="textarea"
                                  v-model="item_.solve_des"
                                  :autosize="{ minRows: 3, maxRows: 10 }"
                                >
                                </el-input>
                              </el-form-item>
                            </el-col>

                            <el-col>
                              <el-form-item
                                label="解决方案附件"
                                class="upload_box"
                              >
                                <el-upload
                                  id="b_upload"
                                  class="upload-demo"
                                  ref="upload2"
                                  action=""
                                  :disabled="true"
                                  :on-preview="handlePreview"
                                  :on-change="upload_success"
                                  :file-list="item_.fileObj"
                                  :before-remove="beforeRemove"
                                >
                                  <!-- <el-button class="button_from_i" slot="trigger" size="small" type="primary">解决方案 +
                                  </el-button> -->
                                </el-upload>
                              </el-form-item>
                            </el-col>
                          </el-row>
                        </el-form>
                      </el-col>
                    </el-row>
                  </el-card>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <div v-else>
        <el-card class="box-card">
          <el-empty description="暂无走访记录"></el-empty>
        </el-card>
      </div>

      <el-drawer
        title="企业信息"
        :visible.sync="table"
        direction="rtl"
        size="45%"
        :before-close="close"
      >
        <drawerVisit
          @update="update"
          :status_agent="status_agent"
          :status_update="status_update"
          :table="table"
          :company_id="company_id"
          :form_admin="form_admin"
        ></drawerVisit>
      </el-drawer>

      <el-dialog
        title="是否删除此条记录"
        :visible.sync="dialogVisible"
        width="20%"
        center
      >
        <span class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="Delete">确 定</el-button>
        </span>
      </el-dialog>
    </el-main>
  </div>
</template>

<script>
import { visitDetailtwo, staff, visitDel } from "@/api/newuser";
import drawerVisit from "./components/drawerVisit.vue";

export default {
  data() {
    return {
      form_admin: {
        company_name: "",
      },
      deleteId: "",
      street_name:'',
      dialogVisible: false,
      status_agent: 1,
      status_update: 0,
      table: false,
      company_id: "",
      datalist: {},
      company_name: this.$route.query.company_name
        ? this.$route.query.company_name
        : "",
      id: this.$route.query.id ? this.$route.query.id : "",
      user_id: this.$store.state.user.id,
      solveSuccess: [],
      solveNot: [],
      Visitdate: [],
      Scrolltop: [],
      Visitdatechoice: "",
      form_add: {
        desc1: "",
        desc2: "",
        Visitdate: "",
        name: "",
        tate: "",
      },
      d_add: false,
      dialogImageUrl: "",
      d_img: false,
      disabled: false,
      labelList: [],
      activeName: "basic",
      Visitpeoplelist1: [],
      Visitpeoplelist2: [],
      form: {
        name: "",
        contacts: "",
        Visitpeople: [],
        Email: "",
        phone: "",
        Visitdate1: "",
        Visitdate2: "",
        record: "",
        demand1: "",
      },
      fileList: [],
      labelStyle: {
        fontSize: "14px",
        fontWeight: "bold",
        margin: "5px 0px 0 0",
      },
      zoom: 1,
      contentStyle: {
        fontSize: "14px",
        // fontWeight: 'bold'
        margin: "5px 0px 0 0",
      },
    };
  },
  components: { drawerVisit },
  mounted() {
    this.company_id = Number(this.$route.query.company_id);
    this.visitDetailtwo();
    // this.choiceScrolltop()
    //mounted监听处理
    window.addEventListener("scroll", this.scrollLoadMore);
    this.staff(1);
    this.staff(2);
    let width =
      document.documentElement.clientWidth || document.body.clientWidth;
    this.zoom = width / 1920;
  },
  destroy() {
    // 移除监听器
    window.removeEventListener("scroll", this.scrollLoadMore);
  },
  methods: {
    cancel() {
      this.deleteId = "";
      this.dialogVisible = false;
    },
    DeleteBtn(row) {
      console.log(row);
      this.deleteId = row.visit.id;
      this.dialogVisible = true;
    },
    Delete() {
      visitDel({ id: this.deleteId }).then((res) => {
        this.$message({
          message: "删除成功",
          type: "success",
        });
        this.visitDetailtwo();
        this.dialogVisible = false;
      });
    },
    update() {},
    close() {
      this.table = false;
    },
    modifyInfo(index) {
      // console.log(this.datalist[index].demand[0].id);
      if (this.datalist[index].demand > 0) {
        this.$router.push({
          path: "/workVisit",
          query: {
            demand_id: this.datalist[index].demand[0].id,
          },
        });
      } else {
        this.$router.push({
          path: "/workVisit",
          query: {
            id: this.datalist[index].visit.id,
          },
        });
      }
    },
    addEnterprisevisit() {
      this.$router.push({
        path: "/addWaitvisit",
        query: {
          company_name: this.company_name,
          company_id: this.datalist[0]
            ? this.datalist[0].visit.company_id
            : this.$route.query.company_id,
        },
      });
    },
    staff(type) {
      staff({
        type: type,
        id: this.user_id,
      }).then((res) => {
        if (type == 1) {
          this.Visitpeoplelist1 = res;
        } else {
          this.Visitpeoplelist2 = res;
        }
      });
    },
    visitDetailtwo() {
      visitDetailtwo({
        id: this.id,
        company_id: this.company_id,
      }).then((res) => {
        // this.datalist = res.list
        this.datalist = res.list.map((item) => {
          if (item.visit.images) {
            let arr = [];
            item.visit.images = item.visit.images.split(",");
            item.visit.images.map((item_) => {
              let obj = {};
              obj.url = item_;
              arr.push(obj);
            });
            item.visit.images = arr;
          }
          if (item.demand.length > 0) {
            item.demand.map((res_, index) => {
              if (res_.solve_file) {
                if (res_.solve_file.length > 2) {
                  let obj = {};
                  let arr = [];
                  obj.name = res_.solve_name;
                  obj.url = res_.solve_file;
                  arr.push(obj);
                  item.demand[index].fileObj = arr;
                }
              }
            });
          }
          return item;
        });
        this.Visitdate = res.date;
        this.solveSuccess = res.label.true_get;
        this.solveNot = res.label.false_get;
        this.street_name = res.street_name
        // console.log(res.list);
        this.company_name = res.list[0]
          ? res.list[0].company_name
          : this.$route.query.company_name;
        this.form_admin.company_name = res.list[0]
          ? res.list[0].company_name
          : this.$route.query.company_name;
        this.choiceScrolltop();
      });
    },
    handleClick() {},
    onSubmit() {},
    addprogramme() {
      this.d_add = true;
    },
    removeProgramme(file) {
      let b_dom = document
        .getElementById("b_upload")
        .getElementsByClassName("el-upload");
      // b_dom[0].style.display = 'inline-block'
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.d_img = true;
    },
    handlePreview(file, fileList) {
      window.open(file.url);
      // console.log(file, fileList);
      //文件下载，命名为file.name
      // window.open(file.url, '_blank')
      // window.open(file.url, file.name)

      //下载文件
      // let aDom = document.createElement('a');
      // aDom.style.display = 'none';
      // aDom.href = file.url;
      // aDom.setAttribute('download', file.name);
      // document.body.appendChild(aDom);
      // aDom.click();
      // document.body.removeChild(aDom);
    },
    upload_success(file, fileList) {},
    beforeRemove() {
      return false;
    },
    choice(item) {
      this.Visitdatechoice = item;
      let top =
        this.$refs[item][0].$el.getBoundingClientRect().top +
        window.scrollY -
        100;
      // 滚动到元素位置
      window.scrollTo({
        top: top,
        behavior: "smooth", // 平滑滚动
      });
    },
    choiceScrolltop() {
      this.Visitdate.forEach((item) => {
        this.$nextTick(() => {
          this.Scrolltop.push(
            this.$refs[item][0].$el.getBoundingClientRect().top - 100
          );
        });
      });
    },

    scrollLoadMore() {
      //页面滚动位置
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      this.Visitdate.forEach((item, index) => {
        let height = this.Scrolltop[index]; //滚动范围
        if (index == 0) {
          if (scrollTop < height) {
            this.Visitdatechoice = item;
          }
        } else {
          if (scrollTop <= height && scrollTop > this.Scrolltop[index - 1]) {
            this.Visitdatechoice = item;
          }
        }
      });
    },
  },
};
</script>

<style scoped lang="less">

::v-deep .is-disabled {
  input {
    color: #606266 !important;
  }
  .el-textarea__inner {
    color: #606266 !important;
  }
}

::v-deep .el-form-item .el-form-item__label {
  font-size: 14px;
  width: 80px;
  font-weight: initial;
  text-align: initial;
}

.el-main {
  zoom: var(--zoom);
}

::v-deep .el-form-item__content .upload-demo {
  .el-upload {
    display: none;
  }
}

::v-deep .el-upload--picture-card {
  display: none;
}

::v-deep .el-drawer__header {
  margin-bottom: 20px;
  display: none;
}

::v-deep .el-form-item .el-form-item__content .el-input__inner {
  height: 38px;
}

::v-deep .Visitdate .el-form-item__content .el-col {
  padding: 0 !important;
}

::v-deep .qw_date .el-form-item__label {
  // width: 100px !important;
  // margin-left: 120px;
}

::v-deep .qw_date .el-form-item .el-form-item__content .el-date-editor {
  width: 100% !important;
  padding-right: 10px;
}

::v-deep .qw_date .el-form-item__content .el-date-editor {
  // width: 150px;
}

::v-deep .v_tabs .el-tabs__header .el-tabs__nav .el-tabs__item {
  padding: 0 33px;
}

::v-deep .card_v .el-card__body {
  padding: 0;

  .el-tabs .el-tabs__content {
    padding: 0 20px;
  }
}

.Navigation {
  //固定页面位置
  position: fixed;
  width: 23%;
}

.date_box {
  text-align: center;

  div {
    height: 40px;
    line-height: 40px;
    font-size: 14px;
  }

  .active_data_l {
    color: #387dff;
  }

  .data_border_b {
    cursor: pointer;
    border-bottom: 1px solid #e8ecef;
  }

  .data_border_b:nth-last-child(2) {
    border-bottom: none;
    margin-bottom: 40px;
  }

  .date_button_t {
    button {
      width: 100%;
    }
  }

  .datetitle {
    background-color: #f5f6f9;
    margin-bottom: 10px;
  }
}

.qw_but {
  padding: 0 80px;
}

.d_boreder {
  border-bottom: 5px solid #eeeff2;
  margin-bottom: 20px;
}

::v-deep
  .descriptions_1
  .el-descriptions__body
  .el-descriptions__table
  tbody:nth-child(1) {
  tr:nth-child(1) {
    color: #808596;
  }

  tr:nth-child(2) {
    color: #4682d7;
  }
}

.company_text {
  .company_title {
    font-size: 22px;
    font-weight: bolder;
  }

  button {
    font-size: 14px;
    background: #387dff;
    padding: 7px 40px;
  }

  .success_box {
    margin: 0px 0 25px 0;

    .el-col-2 {
      height: 26px;
      line-height: 26px;
    }
  }

  .not_box {
    .el-col-2 {
      height: 26px;
      line-height: 26px;
    }
  }
}

.date_category {
  font-size: 14px;
  color: #387dff;
  margin: 15px 0;
}

.date_category .updateInfo::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 30px;
  background-color: #387dff;
  display: inline-block;
  margin: 2px 5px;
}

// ::v-deep .descriptions_2 .el-descriptions__body .el-descriptions__table tbody tr th:nth-child(1),
// ::v-deep .descriptions_2 .el-descriptions__body .el-descriptions__table tbody tr td:nth-child(1){
//   border-right: 1px solid black;
// }
// ::v-deep .descriptions_2 .el-descriptions__body .el-descriptions__table tbody tr th:nth-child(2),
// ::v-deep .descriptions_2 .el-descriptions__body .el-descriptions__table tbody tr td:nth-child(2){
//   padding: 0 10px;
// }
::v-deep
  .el-descriptions__body
  .el-descriptions__table
  tbody
  tr:nth-child(1)
  th {
  padding-bottom: 0;
}

.button_from_i {
  min-width: 125px;
  height: 38px;
  line-height: 0px;
  font-size: 14px;
  color: #3377ff;
  background-color: #ebf2ff;
  border: 1px solid #387dff;
}

.el-main {
  margin-right: 15px;
  border-radius: 5px;
  margin: 25px 30px 0 30px;
  background-color: #f4f5f7;
  padding: 0;
}

.b_bule {
  background-color: #d3e2ff;
  margin: 3px 5px;
  border-radius: 5px;
  color: #4585ff;
  font-size: 14px;
  height: 20px;
  line-height: 20px;
  border: 0;
}

.b_red {
  color: #ff5f58;
  background-color: #fff6f5;
}

.b_red2 {
  color: #ffffff;
  background-color: #ff5f58;
}

.bo_primary {
  position: absolute;
  top: 35px;
  left: -15px;
}

.form_top {
  margin-bottom: 15px;
}

.bo_primary_i {
  margin-left: 5px;
  background-color: #999999;
  color: #ffffff;
  border: none;
  padding: 7px 40px;
}

.bo_primary_i2 {
  padding: 7px 40px;
}

.preservation_b {
  margin: 20px 0;
  border-radius: 30px;
  background-color: #387dff;
  color: #fff;
  padding: 5px 35px;
}

::v-deep .upload_box .el-form-item__label {
  padding: 0;
}

.dialog-footer {
  display: flex;
  justify-content: center;
}

::v-deep .el-dialog {
  border-radius: 10px;
  margin-top: 22vh !important;
}

::v-deep .el-dialog__header {
  .el-dialog__title {
    font-size: 22px;
    font-weight: bolder;
  }

  .el-dialog__headerbtn {
    i {
      position: absolute;
      border: 3px solid #fff;
      top: -50px;
      left: 30px;
      color: #fff;
      border-radius: 30px;
      font-size: 24px;
      font-weight: bolder;
    }
  }
}

@media (max-width: 1360px) {
}

@media (max-width: 1280px) {
}
</style>
